<template>
	<el-dialog
		title="添加关联知识点"
		width="1000px"
		:center="true"
		:append-to-body="true"
		:close-on-click-modal="false"
		:visible.sync="isShow"
	>
		<el-form label-suffix=":" :inline="true">
			<el-form-item label="项目">{{ projectName }}</el-form-item>
			<el-form-item label="科目">
				<el-select v-model="subjectId" @change="changeSubject">
					<el-option
						v-for="item in subjectList"
						:key="item.subjectId"
						:label="item.subjectName"
						:value="item.subjectId"
					/>
				</el-select>
			</el-form-item>
			<el-form-item label="章节">
				<el-select v-model="chapterIds" @change="changeChapter">
					<el-option
						v-for="item in chapterOptionList"
						:key="item.chapterIds"
						:label="item.title"
						:value="item.chapterIds"
					/>
				</el-select>
			</el-form-item>
		</el-form>
		<!-- 树状标题 -->
		<div class="tree-title">
			<div class="item chapter">章节名称</div>
			<div class="item star">知识点星级</div>
		</div>
		<!-- 项目树知识点树 -->
		<div class="tree-box">
			<el-tree
				v-loading="isLoading"
				ref="tree"
				node-key="id"
				:show-checkbox="true"
				:lazy="true"
				:data="treeData"
				:default-checked-keys="checkedKeys"
				:default-expanded-keys="expandedKeys"
				:filter-node-method="filterNode"
				:load="loadNode"
				@check="checkChange"
				:props="{
					children: 'children',
					label: 'name',
					isLeaf: 'leaf'
				}"
			>
				<div class="tree-label" slot-scope="{ node,data }">
					<div class="chapter">{{ node.label }}</div>
					<div
						v-if="data.knowledgeStarLevel"
						class="star"
					>
						{{ data.knowledgeStarLevel|veDict('knowledgeStarLevel') }}
					</div>
				</div>
			</el-tree>
		</div>
		<template #footer>
			<el-button @click="isShow = false">取消</el-button>
			<el-button type="primary" :loading="isLoading" @click="onSubmit">确定</el-button>
		</template>
	</el-dialog>
</template>

<script src="./index.mjs"></script>

<style lang="less" scoped>
	@star-w: 300px;
	.tree-title {
		display: flex;
		align-items: center;
		height: 54px;
		background-color: #f2f3f5;

		.item {
			font-weight: bold;
			font-size: 16px;
			color: #3a3d4b;
		}

		.chapter {
			padding-left: 24px;
			flex-grow: 1;
		}

		.star {
			width: @star-w;
			text-align: center;
		}
	}

	.tree-box {
		max-height: 400px;
		overflow: auto;

		/deep/ .el-tree-node__content {
			height: 54px;
			border-bottom: 1px solid #eee;
		}

		/deep/ .is-checked {
			background-color: #f9f9f9;
		}
		.tree-label {
			flex-grow: 1;
			display: flex;
			align-items: center;
			overflow: hidden;

			.chapter {
				flex-grow: 1;
				white-space: nowrap;
				overflow: hidden;
				text-overflow: ellipsis;
			}

			.star {
				width: @star-w;
				text-align: center;
				flex-shrink: 0;
			}
		}
	}
</style>
